<template>
  <div class="page-main">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="统计周期">
        <el-radio-group v-model="form.date" class="ml-4">
          <el-radio label="1" size="small">日</el-radio>
          <el-radio label="2" size="small">月</el-radio>
          <el-radio label="2" size="small">季度</el-radio>
          <el-radio label="2" size="small">年</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="统计区间">
        <el-date-picker
            size="small"
            v-model="form.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
        />
      </el-form-item>


      <el-form-item label="">
        <el-button type="primary" size="small">统计</el-button>
        <el-button type="primary" size="small">导出</el-button>

      </el-form-item>
    </el-form>



    <el-row :gutter="30">
      <span class="title-span"
      >2023-01至2023-02日间手术退出率</span
      >
      <el-divider/>
      <el-col :span="24">
        <el-table :data="tableData"   style="width: 100%">
          <el-table-column prop="value_0" label="科室名称"/>
          <el-table-column prop="value_1" label="入院前取消率"/>
          <el-table-column prop="value_2" label="术后退出率"/>
          <el-table-column prop="value_3" label="患者爽约率">
            <template #default="scope">
              <span>{{ scope.row.value_3 }}%</span>
            </template>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>
  </div>
</template>


<script setup name="appointmentsAll">
import chartsLine from '/@/components/charts/line.vue';
const form = ref({
  date: '',
  time: '',
  name: "",
});
const tableData = ref([
  {
    value_0: '日间科室',
    value_1: '0.00%',
    value_2: '0.00',
    value_3: '0.00'
  },
  {
    value_0: '日间科室',
    value_1: '0.00%',
    value_2: '0.00',
    value_3: '0.00'
  },
  {
    value_0: '日间科室',
    value_1: '0.00%',
    value_2: '0.00',
    value_3: '0.00'
  },
  {
    value_0: '日间科室',
    value_1: '0.00%',
    value_2: '0.00',
    value_3: '0.00'
  },
  {
    value_0: '日间科室',
    value_1: '0.00%',
    value_2: '0.00',
    value_3: '0.00'
  },
  {
    value_0: '日间科室',
    value_1: '0.00%',
    value_2: '0.00',
    value_3: '0.00'
  },
  {
    value_0: '日间科室',
    value_1: '0.00%',
    value_2: '0.00',
    value_3: '0.00'
  },
  {
    value_0: '日间科室',
    value_1: '0.00%',
    value_2: '0.00',
    value_3: '0.00'
  }, {
    value_0: '日间科室',
    value_1: '0.00%',
    value_2: '0.00',
    value_3: '0.00'
  },


  ]
);

</script>

<style lang="scss" scoped>
:deep() .el-descriptions__title {
  text-align: center;
  width: 100%;
  margin-top: 30px;
}

.margin-top {
  border: 1px solid #ebeef5;
}

.export-button {
  position: absolute;
  right: 30%;
  top: 30px;
}

.title-span {
  width: 100%;
  text-align: center;
  margin-top: 15px;
  font-size: 30px;
  font-size: large;
}

</style>
